<template>
  <view>
    <uv-status-bar />
    <view class="message-header">消息</view>
    <view
      v-for="(item, index) in dataList"
      :key="index"
      class="message-item"
      @click="handleLink(item)"
    >
      <uv-avatar
        :icon="item.icon"
        size="96rpx"
        font-size="40rpx"
        :color="item.color"
        :bg-color="item.bgColor"
      />
      <view class="message-content">
        <uv-text :text="item.title" :lines="1" size="28rpx" color="#212121"></uv-text>
        <uv-text :text="item.note" :lines="1" size="24rpx" color="#BDBDBD"></uv-text>
      </view>
      <view class="message-right">
        <uv-badge type="error" :show="item.value > 0" :max="99" :value="item.value" />
        <uv-icon name="arrow-right" size="28rpx" color="#BDBDBD" bold />
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted, watch, onBeforeUnmount } from "vue";
import { delHtmlTag } from "@/common/mothed.js";
import { getMsgUnRead } from "@/request/message";

const props = defineProps({
  // 是否下拉刷新
  refresh: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update:refresh", "count"]);

watch(
  props,
  (v) => {
    if (v.refresh) {
      setTimeout(() => {
        getList();
      }, 0);
    }
  },
  { immediate: true, deep: true }
);

const dataList = ref([
  {
    icon: "/static/message/icon_remind.png",
    title: "提醒消息",
    note: "",
    bgColor: "#89CFA4",
    color: "#fff",
    value: 0,
    path: "/pages/Message/message",
  },
  {
    icon: "/static/message/icon_notice.png",
    title: "系统公告",
    note: "",
    bgColor: "#4579D5",
    color: "#fff",
    value: 0,
    path: "/pages/Message/notice",
  },
]);

onMounted(() => {
  getList();
  uni.$on("message", () => {
    getList();
  });
});

onBeforeUnmount(() => {
  uni.$off("message");
});

// 获取消息列表
const getList = () => {
  getMsgUnRead()
    .then((res) => {
      if (res.code == 200) {
        dataList.value[0].note = delHtmlTag(res.data.lastContent);
        dataList.value[0].value = res.data.reminderCount;
        dataList.value[1].value = res.data.systemNoticeCount;
        dataList.value[1].note = delHtmlTag(res.data.lastSysNoticeContent);
        let count = 0;
        dataList.value.forEach((i) => {
          count += i.value;
        });
        emit("count", { count, label: "消息" });
      }
    })
    .finally(() => {
      emit("update:refresh", false);
      uni.stopPullDownRefresh();
    });
};

// 跳转页面
const handleLink = (item) => {
  if (!item.path) return;
  uni.navigateTo({
    url: item.path,
  });
};
</script>
<style lang="scss" scoped>
.message-header {
  font-size: 32rpx;
  height: 90rpx;
  line-height: 90rpx;
  padding-left: 40rpx;
  color: #212121;
}
.message-item {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 40rpx;
  &:active {
    background-color: #f1f1f1;
  }
  .message-content {
    flex: 1;
    margin-left: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .message-right {
    display: flex;
    align-items: center;
  }
}
</style>
